<template>
    <div class="box">
        <avue-crud :ref="ref"
                   v-model="form"
                   :page="page"
                   :before-open="beforeOpen"
                   :data="tableData"
                   :table-loading="tableLoading"
                   :option="tableOption"
                   @on-load="getList"
                   @search-change="searchChange"
                   @refresh-change="refreshChange"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   @row-update="handleUpdate"
                   @row-save="handleSave"
                   @row-del="rowDel">
            <template slot-scope="scope" slot="menuLeft">
                <el-button v-if="buttonPermissionsCheck('SYS_MENU_ADD')" type="primary" icon="el-icon-plus"
                           :size="scope.size" @click="handleAdd(null)">新增
                </el-button>
            </template>
            <template slot="menu" slot-scope="scope">
                <el-button v-if="buttonPermissionsCheck('SYS_MENU_ADD')" :size="scope.size"
                           @click="handleAdd(scope.row)" type="text">
                    添加
                </el-button>
            </template>
        </avue-crud>
    </div>
</template>

<script>
    import {tableOption} from '@/js/sys/menu/list.js'
    import {btn} from '@/js/sys/menu/btn.js'
    import {menu} from '@/js/sys/menu/menu.js'
    import {page} from '@/js/sys/menu/page.js'
    import tableMixins from "@/mixins/tableMixins.vue"

    export default {
        name: "sys_menu_list",
        mixins: [tableMixins],
        watch: {
            "form.type": {
                deep: true,
                handler(val) {
                    if (val == '0') {
                        //菜单
                        this.tableOption = menu;
                    } else if (val == '1') {
                        //页面
                        this.tableOption = page;
                    } else if (val == '2') {
                        //按钮
                        this.tableOption = btn;
                    }
                }
            },
        },
        data() {
            return {
                //访问接口前缀
                url: "admin/sys-menu",
                // 表格参数
                tableOption: tableOption,
                //弹框显示判断
                dialogVisible: false,

            }
        },
        created() {

        },
        methods: {

            /**
             * 自定义新增
             */
            handleAdd(row) {
                this.obj = row;
                this.$refs.crud.rowAdd();
            },


            //弹框打开前的回调
            beforeOpen(done, type) {
                this.tableLoading = true;
                this.tableOption.column[1].dicData = this.tableData;
                setTimeout(res => {
                    if (type == 'add' && this.obj != null) {
                        this.form.pid = this.obj.id;
                    }
                }, 50)
                done();
                this.tableLoading = false;

            },

            /**
             * 新增保存
             * @param row 行数据
             * @param done 完成回调
             * @param loading 加载回调
             */
            handleSave: function (row, done, loading) {
                if (row.pid == '' || row.pid == null) {
                    row.pid = 0;
                }
                if (row.type != "1") {
                    //不是页面
                    row.path = "";
                    row.cache = "";
                }

                this.$HttpService.post("/" + this.url + "/" + this.addUrl, row).then(res => {
                    this.$message.success('新增成功');
                    this.getList();
                    done();
                }).catch(() => {
                    loading();
                })
            },


            /**
             * 修改保存
             * @param row 行数据
             * @param index 行索引
             * @param done 完成回调
             * @param loading 加载回调
             */
            handleUpdate: function (row, index, done, loading) {
                if (row.pid == '' || row.pid == null) {
                    row.pid = 0;
                }
                if (row.type != "1") {
                    //不是页面
                    row.path = "";
                    row.cache = "";
                }
                this.$util.put("/" + this.url + "/" + this.updateUrl, row).then(res => {
                    this.$message.success('修改成功');
                    this.getList();
                    done();
                }).catch(() => {
                    loading();
                })
            },


            /**
             * 获取列表数据
             * @param page 分页参数
             * @param params 查询条件
             */
            getList(page, params) {
                this.tableLoading = true;
                let query = Object.assign({}, this.searchForm, this.page);
                this.$HttpService.get("/" + this.url + "/findMenuTree", query).then(res => {
                    this.tableData = res;
                    this.tableLoading = false;
                })
            },
        }
    }
</script>

<style scoped>

</style>
